<template>
  <li class="see-notice">
    <img class="new-notice" src="../../../../assets/icon/new-notice.svg" alt="" />
    <a href="#" @click.prevent="handleViewNotice()">查看公告</a>
  </li>
  <!-- <a href="#" @click="dialogVisibleAbout=true">查看公告</a> -->
  <el-dialog title="最新公告" v-model="dialogVisibleAbout">
    <div class="title">{{ title }}</div>
    <div class="content">{{ content }}</div>
    <el-button class="viewntc" type="primary" round size="small" @click="handleViewMore()">
      查看更多公告
    </el-button>
  </el-dialog>

  <el-dialog title="公告详情" v-model="dialogVisibleMore">
    <el-table :data="tableData" style="width: 100%" v-model="dialogVisibleMore">
      <el-table-column prop="notice_title" label="公告标题" />
      <el-table-column prop="publish_time" label="发布时间" />
      <el-table-column prop="handle" label="操作" width="100">
        <template v-slot="hhh">
          <el-button type="primary" round size="small" @click="handleViewXiz(hhh.row.id)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />
  </el-dialog>

  <el-dialog title="公告详情" v-model="dialogVisibleXiz">
    <div class="title">{{ titlee }}</div>
    <div class="content">{{ contentt }}</div>
  </el-dialog>
</template>

<script setup>
import { getnoticesHttp, getOnenoticeHttp } from '../../../../request/noticeHttp'
import { ref } from 'vue'
const dialogVisibleAbout = ref(false)
const dialogVisibleMore = ref(false)
const dialogVisibleXiz = ref(false)

const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)
const title = ref()
const content = ref()
const tableData = ref([])
const titlee = ref()
const contentt = ref()

const handleViewMore = async () => {
  dialogVisibleAbout.value = false
  dialogVisibleMore.value = true
  const res = await getnoticesHttp(currentPage.value, pageSize.value)
  if (res.data.code === 0) {
    tableData.value = res.data.result.data
    total.value = res.data.result.total
    // console.log(res.data.result.data)
  }
}

const handleSizeChange = (e) => {
  pageSize.value = e
  handleViewMore()
}

const handleCurrentChange = (e) => {
  currentPage.value = e
  handleViewMore()
}

const handleViewNotice = async () => {
  dialogVisibleAbout.value = true
  const ress = await getnoticesHttp(currentPage.value, pageSize.value)
  const idd = ress.data.result.data[0].id
  const res = await getOnenoticeHttp(idd)
  content.value = res.data.result.notice_content
  title.value = res.data.result.notice_title
}
const handleViewXiz = async (id) => {
  // console.log(id)
  dialogVisibleXiz.value = true
  const res = await getOnenoticeHttp(id)
  contentt.value = res.data.result.notice_content
  titlee.value = res.data.result.notice_title
}
</script>

<style lang="less" scoped>
a {
  font-size: 16px;
  color: #333;
  text-decoration: none;
}
.title {
  display: flex;
  justify-content: center;
  font-size: 25px;
}
.content {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  font-size: 18px;
  line-height: 40px;
}
.viewntc {
  margin-top: 40px;
  margin-left: 80%;
}

.see-notice {
  position: relative;
  margin-right: 20px;
  .new-notice {
    position: absolute;
    left: 50%;
    margin-left: -10px;
    top: -15px;
    transform: rotate(0deg);
  }
}
</style>
